<template>
  <div v-if="visitorStartWaitTimestamp > 0" class="waitTimer" :style="{'color': color}">
    <span v-show="waitTime && !showOverTime" class="V7_iconfont V7_iconV7tubiao_jishi"></span>
    <over-time-info :item="item" :show.sync="showOverTime" v-if="webchatActiveName === 'webchat_todo'"></over-time-info>
    <span :style="{'color': showOverTime ? '#FC6B5C' : color}">{{waitTime}}</span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import OverTimeInfo from './overTimeInfo.vue'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'webchatWaitTime',
  components: { OverTimeInfo }
})
export default class WebchatWaitTime extends Vue {
  @Prop() private visitorStartWaitTimestamp: any // 访客等待总时长
  @Prop() private color: string|undefined // 颜色
  @Prop() private item: any
  @Prop() private webchatActiveName: any
  private interval: any
  private showOverTime: boolean = false

  private waitTime = '' // 等待时间

  get diffTime () {
    return (CommonModule as any).diffTime
  }

  @Watch('lastMessageTimestamp')
  private timeChange () {
    this.startInterval()
  }

  private startInterval () {
    if (this.visitorStartWaitTimestamp && this.visitorStartWaitTimestamp > 0) {
      this.interval = window.setInterval(() => {
        const currentTime = new Date().getTime() // 当前时间
        // 本地时间可能不准确 => 本地时间 + 与服务器时间的差值
        const diff = Math.round((currentTime + this.diffTime - this.visitorStartWaitTimestamp) / 1000) // 等待时长
        const minute = Math.floor(diff / 60)
        const second = Math.floor(diff % 60) < 10 ? '0' + Math.floor(diff % 60) : Math.floor(diff % 60)
        this.waitTime = minute + ':' + second
      }, 1000)
    }
  }

  private mounted () {
    this.startInterval()
  }

  private beforeDestroy () {
    this.waitTime = ''
    window.clearInterval(this.interval)
  }
}
</script>
<style lang="stylus" scoped>
  .waitTimer
    span
      vertical-align middle
      margin-left 5px
    .V7_iconV7tubiao_jishi
      font-size 12px
</style>
